<template>
	<view class="">
		<view class="">
			<!-- <view class="">
				<image :src="image" style="width: 100%;  height: 300rpx;" mode="scaleToFill"></image>
			</view> -->
			<!-- <vin @fileList='fileList'></vin>
			<view class="searchBox">
				<view class="searchContext">
					<u-input style="width: 100%; padding-left: 20rpx;" v-model="vinNumber" :clearable="false"  placeholder-style="color: #002B56;" type="text"  placeholder="请输入VIN" maxlength='17' trim='true' @blur="vpnGet()" @input="toUppercase()" />
				</view>
				<view class="_flex _justify_between" style="margin-top: 50rpx;">
					<view class="" style="width: 30%;">
						<u-button  type="primary" plain @click="goSearch">样例</u-button>
					</view>
					<view class="" style="width: 60%;">
						<u-button  type="primary" @click="goSearchTow">开始查询</u-button>
					</view>
				</view>
				<view class=""  style="margin-top: 40rpx;">
					<u-checkbox-group>
						<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle" @change="uerAgreement">
							<text class="tip">使用本服务意味着您已经阅读并同意</text>
							<text class="tip" style="color: #002B56;" @click="goUserAgreement">《用户协议》</text>
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view> -->
			
			
			<vin @fileList='fileList'></vin>
				<view class="searchBox">
					<view class="searchContext">
						<!-- <image src="../../static/VIN.png" mode=""></image> -->
						<u-input style="width: 100%; padding-left: 20rpx;" v-model="vinNumber" :clearable="false"  placeholder-style="color: #002B56;" type="text"  placeholder="请输入VIN" maxlength='17' trim='true' @blur="vpnGet()" @input="toUppercase()" />
					</view>
					<view class="buttons">
						
						<view class="kscx" @click="goSearchTow">
							开始查询
						</view>
						<view class="ckyl"  @click="goSearch">
							查看样例
						</view>
					</view>
					<view class=""  style="margin-top: 40rpx;">
						<u-checkbox-group>
							<u-checkbox active-color="#002B56" v-model="form.checked" shape="circle" @change="uerAgreement">
								<text class="tip">使用本服务意味着您已经阅读并同意</text>
								<text class="tip" style="color: #002B56;" @click="goUserAgreement">《用户协议》</text>
							</u-checkbox>
						</u-checkbox-group>
						
					</view>
				</view>
		</view>
	</view>
</template>

<script>

import API from "@/api/morePage.js"
export default {
	data() {
		return {
			form: {
				checked:true,
			},
			getInfo:{
				image:"",
				// vin:""
			},
			vinNumber: '',
			image: 'https://pxhuodong.oss-cn-beijing.aliyuncs.com/ibuycar/swiper/swiper01.png?'+new Date().getTime(),
		};
	},
	methods:{
		getOcrInfo(image){
			console.log(image);
			let data = {
				image:image,
			}
			API.getOcrInfo(data).then(res=>{
				console.log(res);
				if(res.code == 200){
					this.vinNumber = res.data.vin
				}
				else{
					this.$u.toast('获取VIN码失败');
				}
			})
		},
		fileList(fileList){
			this.getInfo.image = fileList
			console.log("从组建获取的列表")
			console.log(this.getInfo.image)
			this.getOcrInfo(this.getInfo.image)
		},
		
		toUppercase(e) {
			this.vinNumber = this.vinNumber.toUpperCase();
				console.log(this.vinNumber)
		},
		vpnGet(e) {
			
			this.vinNumber = null;
			
			this.vinNumber = e.replace(/[\u4E00-\u9FA5]/g,'')
			
			if (e.length == 17) {
		// 		API.getVin({
		// 			vin: e
		// 		}).then(res => {
		// 			console.log(res)
		// 			if (res.data.isHaveVin) {
		// 				this.carInfoJson = res.data
		// 				this.assessInfo.carModel = res.data.modelName
		// 				this.assessInfo.seriesId = res.data.seriesId
		// 				this.assessInfo.brandId = res.data.brandId
		// 				this.assessInfo.modelId = res.data.modelId
		// 				this.assessInfo.color = res.data.color
		
		// 			}
		// 			//  else {
		
		// 			// 	this.isHaveVin = true
		// 			// }
		// 			else{
		
		// 				this.$u.toast(res.message || '请输入17位车架号');
		// 				this.isHaveVin = false;
		// 				return false
		// 			}
		// 		})
			} else {
				this.$u.toast('请输入17位车架号');
			}
		},
		uerAgreement(e){
			console.log(e);
			this.form.checked = e.value;
		},
		goUserAgreement(){
			uni.navigateTo({
				url: "/pages/login/userAgreement"
			})
		},
		goSearch(){
			uni.navigateTo({
				url:"./recallSelecttExample"
			})
		},
		goSearchTow(){
			if(!this.vinNumber){
				this.$u.toast('请先输入VIN码');
				return false
			}
			if(this.form.checked == false){
				this.$u.toast('请阅读并同意用户协议！');
				return false
			}
			else{
				API.getzhQuery({vin: this.vinNumber}).then(res=>{
					console.log(res)
						
					if(res.data ==''){
						this.$u.toast('暂无召回记录');
					}else if(!res.data.isHaveVin || res.code !=200){
						this.$u.toast( res.message || '请求失败');
						return false
					}else{
						uni.navigateTo({
							url:`./recallSelecttResult?item=${encodeURIComponent(JSON.stringify(res.data))}`
						})
					}
				})
			}
			// if(this.vinNumber){
			// 	API.getzhQuery({vin: this.vinNumber}).then(res=>{
			// 		console.log(res)
			// 		if(res.data.isHaveVin){
			// 			uni.navigateTo({
			// 				url:`./recallSelecttResult?item=${encodeURIComponent(JSON.stringify(res.data))}`
			// 			})
			// 		}else{
			// 			this.$u.toast( res.message || '请求失败');
			// 			return false
			// 		}
			// 	})
			// }else{
			// 	this.$u.toast('请先填写VIN号');
			// }
		}
		// scanCode() {
		// 	var that = this;
		// 	uni.scanCode({
		// 		success: function(res) {
		// 			console.log(res)
		// 		}
		// 	});
		// },
		}
};
</script>
<style scoped lang="scss">
	.buttons{
		view{
			margin-top: 40rpx;
		}
	}
	.searchBox{
		padding:$uni-widthspace;
		.searchContext{
			    // background: #F4F6F5;
			    display: flex;
			    padding: 10rpx 24rpx;
			    border-radius: 15rpx;
				box-sizing: border-box;
				font-size: 40rpx;
				color: #002B56;
				margin-bottom:$uni-widthspace;
				border-bottom: 1px solid #EFEFEF ;
				image{
					width: 42rpx;
					height: 30rpx;
					margin-top: 20rpx;
				}
			}
	}
	
	.tip{
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		text-align: center;
	}
	.ckyl{
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #002B56;
		text-align: center;
	}
	.u-size-default{
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		padding: 10rpx 0;
	}
	.kscx{
		width: 100%;
		background: #002B56;
		border-radius: 8rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		font-family: PingFangSC-Regular;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
	}
	// .searchBox{
	// 	padding:32rpx;
	// }
	// .searchBox .searchContext{
	// 	    background: #F4F6F5;
	// 	    display: flex;
	// 	    padding: 0 32rpx;
	// 	    border-radius: 15rpx;
	// 		font-size: 40rpx;
	// 		    color: #002B56;
	// 	}
	// 	.tip{
	// 		font-size: 24rpx;
	// 	}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>